<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学法减分题库系统 - 本地预览</title>
    <style>
        body {
            font-family: 'Microsoft YaHei', Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            line-height: 1.6;
            color: #333;
        }
        h1, h2 {
            color: #1890ff;
        }
        .warning {
            background-color: #fff3cd;
            border-left: 4px solid #ffc107;
            padding: 10px 15px;
            margin: 20px 0;
        }
        .solution {
            background-color: #d4edda;
            border-left: 4px solid #28a745;
            padding: 10px 15px;
            margin: 20px 0;
        }
        .command {
            background-color: #f8f9fa;
            border: 1px solid #e9ecef;
            border-radius: 4px;
            padding: 10px;
            font-family: Consolas, Monaco, 'Andale Mono', monospace;
            overflow-x: auto;
        }
        button {
            background-color: #1890ff;
            color: white;
            border: none;
            padding: 8px 16px;
            border-radius: 4px;
            cursor: pointer;
            margin-right: 10px;
            margin-bottom: 10px;
        }
        button:hover {
            background-color: #40a9ff;
        }
    </style>
</head>
<body>
    <h1>学法减分题库系统 - 本地预览</h1>
    
    <div class="warning">
        <h3>⚠️ 无法直接打开问题</h3>
        <p>Vue项目不能通过file://协议直接打开，必须通过HTTP服务器提供。这是因为浏览器的安全策略限制了通过file://协议加载JavaScript模块。</p>
    </div>
    
    <div class="solution">
        <h2>解决方案</h2>
        <p>请选择以下任意方式启动本地服务器：</p>
        
        <h3>1. 使用项目自带的Node.js服务器</h3>
        <p>在项目根目录下，双击运行 <strong>start-local-server.bat</strong> 文件，然后访问:</p>
        <div class="command">http://localhost:8080</div>
        
        <h3>2. 使用Python启动服务器</h3>
        <p>如果您已安装Python，可以在命令行中执行：</p>
        <div class="command">
            cd dist<br>
            python -m http.server 8080
        </div>
        <p>然后访问: <a href="http://localhost:8080">http://localhost:8080</a></p>
    </div>
    
    <h2>快速启动</h2>
    <button onclick="startNodeServer()">启动Node.js服务器</button>
    <button onclick="startPythonServer()">启动Python服务器</button>
    
    <div id="output" class="command" style="margin-top: 20px; display: none;"></div>
    
    <script>
        function startNodeServer() {
            document.getElementById('output').style.display = 'block';
            document.getElementById('output').innerHTML = '正在启动Node.js服务器...<br>请等待命令行窗口出现，然后访问 <a href="http://localhost:8080" target="_blank">http://localhost:8080</a>';
            
            // 使用ActiveX对象执行命令 (仅适用于Windows)
            try {
                var shell = new ActiveXObject("WScript.Shell");
                shell.Run("cmd /c start start-local-server.bat", 1, false);
            } catch (e) {
                document.getElementById('output').innerHTML += '<br><br>无法自动启动服务器。请手动双击运行 start-local-server.bat 文件。';
            }
        }
        
        function startPythonServer() {
            document.getElementById('output').style.display = 'block';
            document.getElementById('output').innerHTML = '正在尝试启动Python服务器...<br>请等待命令行窗口出现，然后访问 <a href="http://localhost:8080" target="_blank">http://localhost:8080</a>';
            
            try {
                var shell = new ActiveXObject("WScript.Shell");
                shell.Run('cmd /c cd dist && python -m http.server 8080 || python -m SimpleHTTPServer 8080', 1, false);
            } catch (e) {
                document.getElementById('output').innerHTML += '<br><br>无法自动启动服务器。请手动执行以下命令：<br>cd dist<br>python -m http.server 8080';
            }
        }
    </script>
</body>
</html> 